<template>
  <div class="layout-left-module-item">
    <div class="layout-left-module-item-title">
      <img class="layout-left-module-item-title-icon" v-lazy="'/icon/icon-resource.png'" :alt="toolsJon.title" />
      {{ toolsJon.title }}
    </div>
    <div class="layout-left-module-result" v-if="toolsJon.links.length">
      <div
        :class="['simple-web-link', 'bg20' + (i < 9 ? '0' : i < 16 ? '1' : i < 21 ? '2' : i < 26 ? '3' : i < 31 ? '4' : '5')]"
        v-for="(link, i) in toolsJon.links" :key="link.name">
        <el-link :underline="false" :href="link.url" target="_blank" class="link">{{ link.name }}</el-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const toolsJon = {
  title: '常用工具集',
  links: [
    { name: '孟德尔随机化', url: 'http://app.mrbase.org/' },
    { name: '随机化', url: 'http://www.jerrydallal.com/random/randomize.htm' },
    { name: '计算样本量', url: 'http://www.powerandsamplesize.com/' },
    { name: '简单随机抽样', url: 'https://www.biostats.cn/statbox/index.htm/random/sampling/simple' },
    { name: '完全随机分组', url: 'https://www.biostats.cn/statbox/index.htm/random/allocate/simple' },
    { name: '统计计算系统', url: 'https://www.biostats.cn/statbox/' },
    { name: 'ATC编码查询', url: 'http://cheman.chemnet.com/atc/' },
    { name: '美国药品NDC查询', url: 'https://www.drugfuture.com/fda-ndc/' },
    { name: '中国药品信息查询', url: 'https://www.dayi.org.cn/' },
    { name: 'ATC/DDD查询', url: 'https://www.whocc.no/atc_ddd_index/' },
    { name: 'ICD编码查询', url: 'https://icd.who.int/ct11/icd11_mms/en/release' },
    { name: 'dicom编辑', url: 'https://dicom.innolitics.com' },
    { name: '线上dicom库', url: 'https://www.dicomlibrary.com' },
    { name: '影响因子搜索', url: 'https://www.letpub.com.cn/' },
    { name: '分区查询', url: 'http://www.fenqubiao.com' },
    { name: '期刊搜索', url: 'https://www.scimagojr.com/' },
    { name: 'ISSN搜索', url: 'http://muchong.com/bbs/journal.php' },
    { name: '临床分析', url: 'https://www.aclbi.com/static/index.html#/' },
    { name: 'TCGA分析', url: 'https://www.camoip.net/' },
    { name: 'GO/KEGG分析', url: 'http://biit.cs.ut.ee/gprofiler/' },
    { name: '生信学分析', url: 'http://software.broadinstitute.org/gsea/msigdb/' },
    { name: '图片工具', url: 'https://tiomg.org/' },
    { name: 'pdf工具', url: 'https://tiomg.org/#pdf-tools' },
    { name: '词云图生成器', url: 'http://www.atoolbox.net/Tool.php?Id=1003' },
    { name: '心率计算器', url: 'http://www.atoolbox.net/Tool.php?Id=974' },
    { name: '身高预测计', url: 'http://www.atoolbox.net/Tool.php?Id=1026' },
    { name: 'BMR计算器', url: 'http://www.atoolbox.net/Tool.php?Id=827' },
    { name: '二维码', url: 'https://cli.im/' },
    { name: '熵数图表', url: 'https://www.dbbqb.com/' },
    { name: '问卷', url: 'https://www.wenjuan.com/' },
    { name: 'PDF全能工具', url: 'https://www.ilovepdf.com/zh-cn' },
    { name: 'Light PDF', url: 'https://lightpdf.com/zh/' },
    { name: 'PDF2Word', url: 'https://pdf2doc.com/zh/' },
    { name: '永中PDF', url: 'https://pdf.yozocloud.cn/p/home' },
    { name: 'VIP视频解析', url: 'http://tool.liumingye.cn/video/' },
    { name: '数据可视化', url: 'http://data.viggo.site/' },
    { name: '作图工具', url: 'https://www.logosc.cn/design?utm_source=hao.logosc.cn&utm_medium=referral' },
    { name: 'Json格式转换', url: 'https://www.bejson.com/' },
    { name: 'JsOcr图片文字识别', url: 'https://gongpeione.github.io/quick-js-ocr/example/' },
    { name: 'Excel函数', url: 'https://support.microsoft.com/zh-cn/office/excel-%E5%87%BD%E6%95%B0-%E6%8C%89%E5%AD%97%E6%AF%8D%E9%A1%BA%E5%BA%8F-b3944572-255d-4efb-bb96-c6d90033e188?ui=zh-cn&rs=zh-cn&ad=cn' }
  ]
}
</script>
<style lang="scss" scoped>
.layout-left-module-item {
  position: relative;
  width: 275px;
  height: auto;
  min-height: 100px;
  margin-bottom: 10px;
  background-color: white;
  padding: 10px;
  box-shadow: 0px 0px 20px #cccccc;

  .layout-left-module-item-title {
    line-height: 30px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;

    .layout-left-module-item-title-icon {
      width: 20px;
      margin-right: 5px;
      vertical-align: text-bottom;
    }
  }

  .layout-left-module-result {
    text-align: left;
    line-height: 30px;

    .simple-web-link {
      display: inline-block;
      font-size: 12px;
      margin-right: 6px;
      margin-bottom: 7px;
      padding: 0 5px;
      background-color: #f5f7fd;
      border-radius: 3px;
    }

    .bg200 {
      background-color: #f5f7fd;
    }

    .bg201 {
      background-color: #efede8;
    }

    .bg202 {
      background-color: #f5e6e6;
    }

    .bg203 {
      background-color: #d6d6ec;
    }

    .bg204 {
      background-color: #beecbe;
    }

    .bg205 {
      background-color: #eee3e3;
    }
  }
}
</style>
